// export default FallingManageLogin;
import React, { Component } from 'react';
import { connect } from 'react-redux';
// import Typography from '@material-ui/core/Typography';
import { Button, AppBar, Toolbar, Tooltip, IconButton, Grid, Typography, Hidden, Link, Tab, Tabs, Avatar } from '@material-ui/core';
import { Menu, Notifications, Help } from '@material-ui/icons';
import { accountExistence } from './fallingmanagemenu.reducer';
import PropTypes from 'prop-types';
// tslint:disable-next-line:no-submodule-imports
import { createStyles, styled, Theme, createMuiTheme, ThemeProvider, MuiThemeProvider, withTheme } from '@material-ui/core/styles';
import { login } from 'app/shared/reducers/authentication';
import { IRootState } from 'app/shared/reducers';

export interface IFallingManageMenuHeaderProps extends StateProps, DispatchProps {}
export const Login = (props: IFallingManageMenuHeaderProps) => {};
class FallingManageMenuHeader extends React.Component<IFallingManageMenuHeaderProps> {
  render() {
    const lightColor = 'rgba(255, 255, 255, 0.7)';
    return (
      <React.Fragment>
        <AppBar color="primary" position="sticky" elevation={0}>
          <Toolbar>
            <Grid container spacing={1} alignItems="center">
              <Hidden smUp>
                <Grid item>
                  <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    // tslint:disable-next-line:no-console
                    // className={classes.menuButton}
                  >
                    {/* tslint:disable-next-line:no-console */}
                    {/* {console.log(classes)} */}
                    <Menu />
                  </IconButton>
                </Grid>
              </Hidden>
              <Grid item xs />
              <Grid item>
                <Link style={{ textDecoration: 'none', color: lightColor }} href="#" variant="body2">
                  Go to docs
                </Link>
              </Grid>
              <Grid item>
                <Tooltip title="Alerts • No alerts">
                  <IconButton color="inherit">
                    <Notifications />
                  </IconButton>
                </Tooltip>
              </Grid>
              <Grid item>
                {/* tslint:disable-next-line:no-multi-spaces */}
                <IconButton color="inherit" style={{ padding: 4 }}>
                  <Avatar src="/static/images/avatar/1.jpg" alt="My Avatar" />
                </IconButton>
              </Grid>
            </Grid>
          </Toolbar>
        </AppBar>
        <AppBar
          component="div"
          // className={classes.secondaryBar}
          style={{ zIndex: 0 }}
          color="primary"
          position="static"
          elevation={0}
        >
          <Toolbar>
            <Grid container alignItems="center" spacing={1}>
              <Grid item xs>
                <Typography color="inherit" variant="h5" component="h1">
                  Authentication
                </Typography>
              </Grid>
              <Grid item>
                {/* tslint:disable-next-line:no-multi-spaces */}
                <Button style={{ borderColor: lightColor }} variant="outlined" color="inherit" size="small">
                  Web setup
                </Button>
              </Grid>
              <Grid item>
                <Tooltip title="Help">
                  <IconButton color="inherit">
                    <Help />
                  </IconButton>
                </Tooltip>
              </Grid>
            </Grid>
          </Toolbar>
        </AppBar>
        <AppBar
          component="div"
          style={{ zIndex: 0 }}
          color="primary"
          position="static"
          // // tslint:disable-next-line:no-multi-spaces
          // className={classes.secondaryBar}
          elevation={0}
        >
          <Tabs value={0} textColor="inherit">
            <Tab textColor="inherit" label="Users" />
            <Tab textColor="inherit" label="Sign-in method" />
            <Tab textColor="inherit" label="Templates" />
            <Tab textColor="inherit" label="Usage" />
          </Tabs>
        </AppBar>
      </React.Fragment>
    );
  }
}
const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated,
  redirectMessage: authentication.redirectMessage,
  account: authentication.account,
  errorMessage: authentication.errorMessage,
  sessionHasBeenFetched: authentication.sessionHasBeenFetched,
  idToken: authentication.idToken,
  logoutUrl: authentication.logoutUrl
});

const mapDispatchToProps = { login, accountExistence };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FallingManageMenuHeader);
// export default FallingManageLogin;
